<template>
    <div class="search">
        <Header :isLeft="true" title="搜索"></Header>
        <div class="search-header">
            <form class="search-wrap">
                <i class="fa fa-search"></i>
                <input type="text" v-model="key_word" placeholder="输入商家，商品信息">
                <button @click.prevent="searchHandle">搜索</button>
            </form>
        </div>
        <div class="shop" v-if="result && !showShop">
            <div class="empty-wrap" v-if="empty">
                <img src="https://fuss10.elemecdn.com/d/60/70008646170d1f654e926a2aaa3afpng.png" alt>
                <div class="empty-txt"><h4>
                    附近没有搜索结果
                </h4>
                    <span>换个关键词试试吧</span></div>
            </div>
            <div v-else>
                <SearchIndex :data="result.restaurants" @click="$router.push('/shop')"></SearchIndex>
                <SearchIndex :data="result.words" @click="shopItemClick"></SearchIndex>
            </div>
        </div>
        <div class="container" v-if="showShop">
            <!--    导航-->
            <FilterView
                    :filterData="filterData"
                    @searchFixed="showFilterView"
                    @updateData="updateData"

            ></FilterView>
            <div
                    class="shoplist"
                    v-infinite-scroll="loadMore"
                    :infinite-scroll-disabled="loading"
            >
                <IndexShop v-for="(item,index) in restaurants" :key="index" :restaurant="item.restaurant"/>

            </div>
        </div>

    </div>
</template>

<script>
    import Header from '../components/Header.vue'
    import SearchIndex from '../components/SearchIndex.vue'
    import FilterView from '../components/FilterView.vue'
    import IndexShop from '../components/IndexShop.vue'
    import {InfiniteScroll} from 'mint-ui';

    export default {
        name: "Search",
        components: {
            Header,
            SearchIndex,
            FilterView,
            IndexShop,
        },
        directives: {InfiniteScroll},

        data() {
            return {
                key_word: "",
                result: null,
                empty: false,
                showShop: false,
                filterData: null,
                showFilter: false, //显示蒙版
                restaurants: [], //存放所有商家的容器
                page: 0,
                size: 7,
                loading: false,
                data: null, //选择的排序条件
                list: []

            }
        },
        watch: {
            key_word() {
                this.empty = false
                this.showShop = false
                this.keyWordChange()
            }
        },
        created() {
            //重新拉取排序的相关信息
            this.$axios('/api/profile/filter').then(res => {
                console.log(res.data)
                this.filterData = res.data
            }).catch((err) => {
                console.log(err)
            })
        },
        methods: {

            keyWordChange() {
                console.log(this.key_word)
                this.$axios(`/api/profile/typeahead/${this.key_word}`).then(res => {
                    console.log(res.data)
                    this.result = res.data
                }).catch(err => {

                    this.result = null
                    console.log('this.result')
                    console.log(err)
                    console.log(this.result)
                })
            },
            searchHandle() {
                if (!this.key_word) {
                    console.log('无搜索内容')
                    return
                }
                //  搜索
                if (this.result && (this.result.restaurants.length > 0 || this.result.words.length)) {

                    console.log('有内容')
                    this.shopItemClick()
                } else {
                    this.empty = true
                }
            },
            //    点击商品 显示商家信息
            shopItemClick() {
                //当我们重新搜索的时候，需要将一些值重新赋值为空
                this.page=0
                this.restaurants=[]
                this.showShop = true
            },
            //更新数据
            updateData(condition) {
                console.log('condition')
                console.log(condition)
                this.data = condition
                this.shopItemClick()
            },
            showFilterView(isShow) {
                this.showFilter = isShow;
            },
            loadMore() {
                console.log(1)
                this.page++
                // 拉取商家信息
                this.$axios
                    .post(`/api/profile/restaurants/${this.page}/${this.size}`, this.data)
                    .then(res => {
                        console.log(res.data);

                        // this.restaurants = res.data;
                        if (res.data.length > 0) {
                            res.data.forEach(item => {
                                this.restaurants.push(item);
                            });
                        } else {
                            this.loading = true
                        }
                    });
            }

        }

    }
</script>

<style scoped>
    .search {
        width: 100%;
        height: 100%;
        overflow: auto;
        box-sizing: border-box;
    }

    .search-header {
        margin-top: 45px;
        background: #fff;
        padding: 0 4.266667vw;
    }

    .search-header .search-wrap {
        padding: 2.933333vw 2.933333vw 2.933333vw 0;
        display: flex;
        align-items: center;
        position: relative;
    }

    .search-wrap .fa-search {
        width: 2.933333vw;
        height: 2.933333vw;
        color: #888;
        position: absolute;
        top: 4.6666666vw;
        left: 2.933333vw;
    }

    .search-wrap input {
        flex-grow: 1;
        border-radius: 0.266667vw;
        background-color: #f8f8f8;
        padding: 1.733333vw 4vw 1.733333vw 8.8vw;
        color: #666;
        outline: none;
        border: none;
    }

    .search-wrap button {
        outline: none;
        border: none;
        color: #333;
        font-size: 0.426667rem;
        background: #fff;
        font-weight: 700;
        margin-left: 2.933333vw;
        font-size: 14px;
    }

    .shop {
        width: 100%;
        height: calc(100% - 95px);
        overflow: auto;
    }

    .empty-wrap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #fff;
        display: flex;
        justify-content: center;
    }

    .empty-wrap img {
        width: 35vw;
        height: 35vw;
    }

    .empty-txt h4 {
        color: #666;
        font-size: 1rem;
        margin: 12vw 0 2vw 0;
    }

    .empty-txt span {
        color: #999;
        font-size: 0.8rem;
    }
</style>
